<!doctype html>
<html>
<head>
	<title>jQuery timer plugin | Start an editable pretty timer inside any HTML element</title>
	<meta charset='utf-8'>
	<meta name='keywords' content='jquery, timer, plugin, jquery timer, jquery timer plugin'>
	<meta name='description' content='jQuery timer plugin, Start an editable pretty timer inside any HTML element'>
	<meta name='author' content='Walmik Deshpande'>
	<meta charset='UTF-8'>
	<meta name='viewport' content='width=device-width, initial-scale=1'>
	<link rel='canonical' href='http://jquerytimer.com' />
	<link href='bootstrap.min.css' rel='stylesheet'>
    <link href='http://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet' type='text/css'>
	<style>
        a:hover {
            color: #333;
        }

		pre {
			background-color: #e0e0e0;
			border: none;
			margin-bottom: 20px;
		}

		pre, .btn, .form-control {
			border-radius: 0;
			-webkit-border-radius: 0;
			-moz-border-radius: 0;
		}

		h1{
			font-family: 'Comfortaa', Helvetica, Arial,  sans-serif;
            font-weight: 200;
            margin-bottom: 20px;
		}
		em { color: #999; font-size: 12px; }

		.top-bar {
			background: #000;
			padding: 10px 0;
		}

		.dark {
			padding-bottom: 30px;
			margin-bottom: 30px;
			border-bottom: 1px solid #ccc;
		}

		.timer {
			background: #f2f3f4;
			margin-bottom: 10px;
			font-weight: bold;
			font-size: 16px;
			text-shadow: -1px 0 1px #fff;
		}

		.action {
			font-style: italic;
		}

        .highlight {
            color: #a80000;
        }

        .highlight:hover {
            text-decoration: none;
        }

		/*!
         * "Fork me on GitHub" CSS ribbon v0.1.1 | MIT License
         * https://github.com/simonwhitaker/github-fork-ribbon-css
         */

		/* Left will inherit from right (so we don't need to duplicate code) */
		.github-fork-ribbon {
			/* The right and left classes determine the side we attach our banner to */
			position: absolute;

			/* Add a bit of padding to give some substance outside the "stitching" */
			padding: 2px 0;

			/* Set the base colour */
			background-color: #a00;

			/* Set a gradient: transparent black at the top to almost-transparent black at the bottom */
			background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.15)));
			background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
			background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
			background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
			background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
			background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));

			/* Add a drop shadow */
			-webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
			-moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
			box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);

			/* Set the font */
			font: 700 13px "Helvetica Neue", Helvetica, Arial, sans-serif;

			z-index: 9999;
			pointer-events: auto;
		}

		.github-fork-ribbon a,
		.github-fork-ribbon a:hover {
			/* Set the text properties */
			color: #fff;
			text-decoration: none;
			text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
			text-align: center;

			/* Set the geometry. If you fiddle with these you'll also need
            to tweak the top and right values in.github-fork-ribbon. */
			width: 200px;
			line-height: 20px;

			/* Set the layout properties */
			display: inline-block;
			padding: 2px 0;

			/* Add "stitching" effect */
			border-width: 1px 0;
			border-style: dotted;
			border-color: #fff;
			border-color: rgba(255, 255, 255, 0.7);
		}

		.github-fork-ribbon-wrapper {
			width: 150px;
			height: 150px;
			position: absolute;
			overflow: hidden;
			top: 0;
			z-index: 9999;
			pointer-events: none;
		}

		.github-fork-ribbon-wrapper.fixed {
			position: fixed;
		}

		.github-fork-ribbon-wrapper.right {
			right: 0;
		}

		.github-fork-ribbon-wrapper.right .github-fork-ribbon {
			top: 42px;
			right: -43px;

			-webkit-transform: rotate(45deg);
			-moz-transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			-o-transform: rotate(45deg);
			transform: rotate(45deg);
		}

	</style>
</head>
<body>
	<div class='full-width dark'>
		<div class='container'>
			<h1>jQuery Timer</h1>
			<ul class='list-unstyled'>
				<li>Lightweight <a href='test/timer.jquery.html'>well tested</a> jQuery pretty timer plugin</li>
				<li>Start, Pause, Resume and Remove a timer inside any HTML element.</li>
				<li>Get notified at a set time or at regular intervals.</li>
				<li>Click and edit time while timer is running!</li>
			</ul>
			<br>
			<h4>Try it out</h4>
			<div class='row'>
				<div class='col-md-3'>
					<input type='text' name='timer' class='form-control timer' placeholder='0 sec' />
				</div>
				<div class='col-md-9'>
					<button class='btn btn-success start-timer-btn'>Start</button>
					<button class='btn btn-success resume-timer-btn hidden'>Resume</button>
					<button class='btn pause-timer-btn hidden'>Pause</button>
					<button class='btn btn-danger remove-timer-btn hidden'>Remove Timer</button>
				</div>
			</div>
			<br>
			<p>
				<strong><a href='https://raw.githubusercontent.com/walmik/timer.jquery/master/src/timer.jquery.js'>Download plugin</a></strong> |
				<strong><a href='https://github.com/walmik/timer.jquery' class='highlight'>&#9733; Star this project on Github</a></strong>
			</p>
		</div>
	</div>
	<div class='full-width'>
		<div class='container'>
			<h4>How to</h4>
			<div class='row'>
				<div class='col-md-3 action'>Install:</div>
				<div class='col-md-9'>
<pre><a href='https://raw.githubusercontent.com/walmik/timer.jquery/master/src/timer.jquery.js'>Download</a> the jQuery timer plugin and put it in a SCRIPT tag in your HTML page after jQuery itself. </pre>
				</div>
				<div class='col-md-3 action'>Start a timer:</div>
				<div class='col-md-9'>
<pre>$('#divId').timer(); <em>//Same as $('#divId').timer('start')</em></pre>
				</div>
				<div class='col-md-3 action'>Start at a particular time:</div>
				<div class='col-md-9'>
<pre>$('#divId').timer({
    seconds: 100 <em>//Specify start time in seconds</em>
});</pre>
				</div>
				<div class='col-md-3 action'>Pause:</div>
				<div class='col-md-9'>
<pre>$('#divId').timer('pause');</pre>
				</div>
				<div class='col-md-3 action'>Resume:</div>
				<div class='col-md-9'>
<pre>$('#divId').timer('resume');</pre>
				</div>
				<div class='col-md-3 action'>Remove Timer:</div>
				<div class='col-md-9'>
<pre>$('#divId').timer('remove');</pre>
				</div>
				<div class='col-md-3 action'>Get number of seconds:</div>
				<div class='col-md-9'>
<pre>$('#divId').data('seconds');</pre>
				</div>
				<div class='col-md-3 action'>Get notified:</div>
				<div class='col-md-9'>
<pre>
<em>//start a timer & execute a function in 5 minutes & 30 seconds</em>
$('#divId').timer({
    <strong>duration:</strong> '5m30s',
    <strong>callback:</strong> function() {
        alert('Time up!');
    }
});
</pre>
				</div>
				<div class='col-md-3 action'>Get notified:</div>
				<div class='col-md-9'>
<pre>
<em>//start a timer & execute a function <strong>every</strong> 2 minutes</em>
$('#divId').timer({
    <strong>duration:</strong> '2m',
    <strong>callback:</strong> function() {
        alert('Why, Hello there');
    },
    <strong>repeat:</strong> true <em>//repeatedly calls the callback you specify</em>
});
</pre>
				</div>
				<div class='col-md-3 action'>Repeat callback & reset timer:</div>
				<div class='col-md-9'>
<pre>
<em>//start a timer & execute a function every 30 seconds and then reset the timer at the end of 30 seconds.</em>
$('#divId').timer({
    <strong>duration:</strong> '30s',
    <strong>callback:</strong> function() {
        console.log('Timer will reset!');
        $('#divId').timer('reset');
    },
    <strong>repeat:</strong> true <em>//repeatedly call the callback</em>
});
</pre>
				</div>
				<div class='col-md-3 action'>
                    Format:
                    By default the timer will display a pretty output (30 sec OR 1:06). You can change this format if you like.
                </div>
				<div class='col-md-9'>
<pre><em>// Show a digital timer instead of pretty timer:</em>
$('#divId').timer({
    <strong>format:</strong> '%H:%M:%S'  <em>Display time as 00:00:00</em>
});

<em>// OR</em>
$('#divId').timer({
    <strong>format:</strong> '%h:%m:%s'  <em>Display time as 0:0:0</em>
});

<em>// OR</em>
$('#divId').timer({
    <strong>format:</strong> '%M minutes %s seconds'  <em>Display time as 3 minutes 45 seconds</em>
});</pre>
                </div>

				<div class='col-md-3 action'>Update frequency: By default the timer display updates every 500ms to show an accurate update of time. You can change this by specifying the update frequency in milliseconds.</div>
				<div class='col-md-	9'>
<pre>$('#divId').timer({
	updateFrequency: 2000 	// Update the timer display every 2 seconds.
});</pre>
				</div>
			</div><!-- /row -->

			<br>

			<p>
				<strong><a href=https://raw.githubusercontent.com/walmik/timer.jquery/master/src/timer.jquery.js'>Download jQuery timer plugin</a></strong>
			</p>


		</div>
	</div>

	<div class='github-fork-ribbon-wrapper right fixed'>
		<div class='github-fork-ribbon'>
			<a href='https://github.com/walmik/timer.jquery'>Fork me on GitHub</a>
		</div>
	</div>

	<script src='libs/jquery/jquery-1.11.0.min.js' type='text/javascript'></script>
	<script src='src/timer.jquery.js'></script>
	<script>
	    (function(){
			var hasTimer = false;
			// Init timer start
			$('.start-timer-btn').on('click', function() {
				hasTimer = true;
				$('.timer').timer({
					editable: true
                });
				$(this).addClass('hidden');
				$('.pause-timer-btn, .remove-timer-btn').removeClass('hidden');
			});

			// Init timer resume
			$('.resume-timer-btn').on('click', function() {
				$('.timer').timer('resume');
				$(this).addClass('hidden');
				$('.pause-timer-btn, .remove-timer-btn').removeClass('hidden');
			});


			// Init timer pause
			$('.pause-timer-btn').on('click', function() {
				$('.timer').timer('pause');
				$(this).addClass('hidden');
				$('.resume-timer-btn').removeClass('hidden');
			});

			// Remove timer
			$('.remove-timer-btn').on('click', function() {
				hasTimer = false;
				$('.timer').timer('remove');
				$(this).addClass('hidden');
				$('.start-timer-btn').removeClass('hidden');
				$('.pause-timer-btn, .resume-timer-btn').addClass('hidden');
			});

			// Additional focus event for this demo
			$('.timer').on('focus', function() {
				if(hasTimer) {
					$('.pause-timer-btn').addClass('hidden');
					$('.resume-timer-btn').removeClass('hidden');
				}
			});

			// Additional blur event for this demo
			$('.timer').on('blur', function() {
				if(hasTimer) {
					$('.pause-timer-btn').removeClass('hidden');
					$('.resume-timer-btn').addClass('hidden');
				}
			});
		})();
	</script>
</body>
</html>
